<template>
	<view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-cell-group>
			<u-cell-item title="头像" :arrow="false" :center="true">
				<u-avatar slot="right-icon" :src="info.img"></u-avatar>
			</u-cell-item>
			<u-cell-item @click="changenickname" title="昵称" :arrow="false">
				<p slot="right-icon">{{info.nickname}}</p>
			</u-cell-item>
			<u-cell-item @click="changepassword" title="密码" :arrow="false">
				<u-input slot="right-icon" v-model="info.password" input-align="right" type="password" disabled />
			</u-cell-item>
			<u-cell-item title="邮箱" :arrow="false">
				<p slot="right-icon">{{info.email}}</p>
			</u-cell-item>
		</u-cell-group>
		<u-modal v-model="show1" :title="title" :show-cancel-button="true" @confirm="sendnickname">
			<view class="slot-content">
				<u-input v-model="value" />
			</view>
		</u-modal>
		<u-modal v-model="show2" :title="title" :show-cancel-button="true" @confirm="sendpassword">
			<view class="slot-content">
				<u-form ref="uForm" :label-width="130" label-align="center">
					<u-form-item label="验证码" prop="code">
						<u-input placeholder="请输入验证码" v-model="code" type="text"></u-input>
						<u-button slot="right" type="success" size="mini" @click="getCode">{{codeText}}</u-button>
						<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
					</u-form-item>
					<u-form-item label="新密码" prop="password">
						<u-input type="password" v-model="password" />
					</u-form-item>
					<u-form-item label="确认密码" prop="password2">
						<u-input type="password" v-model="password2" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				avatar: "",
				show1: false,
				show2: false,
				value: "",
				title: "",
				code: "",
				codeText: "",
				password: "",
				password2: ""
			}
		},
		computed: {
			...mapGetters({
				info: "vuex_user"
			})
		},
		methods: {
			changenickname() {
				this.title = "请输入新昵称"
				this.show1 = true
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					this.$u.api.postgetvcodeP({
						username:this.info.username
					}).then(res => {
						console.log(res)

						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeText = text;
			},
			changepassword() {
				this.title = "修改密码"
				this.show2 = true
			},
			sendnickname() {
				console.log(this.value)
				this.$u.api.postupdateUname({
					new_nickname: this.value,
					username: this.info.username
				}).then(res => {
					this.$u.vuex('vuex_user.nickname', this.value);
					this.value = ""
				})
			},
			sendpassword() {
				this.$u.api.postupdata_Pwd({
					username: this.info.username,
					newpassword: this.password,
					password: this.info.password,
					code: this.code,
				}).then(res => {
					console.log(res)
					if(res==200){
						this.$u.vuex('vuex_user.password', this.password);
					}else{
						this.$refs.uTips.show({
							title: res.msg,
							type: 'error',
							duration: '2300'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
		width: 95%;
	}
</style>
